$(function () {
    // initLeftMenu();
    renderTab();
})

layui.use('element', function () {})

function renderTab() {
    layui.use('element', function () {
        var element = layui.element;
        element.render('nav');
        var $ = layui.$;
        $('.site-demo-active').on('click', function () {
            var dataid = $(this);
            // 这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                // 如果比零小，则直接打开新的tab项
                // active.tabAdd("'"+getContentPath()+"/404.jsp'", 10000, '首页');
                active.tabAdd(dataid.attr("data-url"), dataid.attr("id"), dataid.html().trim());
            } else {
                // 否则判断该tab项是否以及存在
                var isData = false; // 初始化一个标志，为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    // 如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if ($(this).attr("lay-id") == dataid.attr("id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    // 标志为false 新增一个tab项
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("id"), dataid.html().trim());
                }
            }
            active.tabChange(dataid.attr("id"));
        });
        var active = {
            // 在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function (url, id, name) {
                // 新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                // 关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd('demo', {
                    title: name,
                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',
                    id: id // 规定好的id
                })
                FrameWH();  // 计算ifram层的大小
            },
            tabChange: function (id) {
                // 切换到指定Tab项
                element.tabChange('demo', id); // 根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);// 删除
            }
        };




    });// 初始化element,并绑定事件。


}

function FrameWH() {
	// var h = $(window).height();
    var h = $(window).height() - 175;
    $("iframe").css("height", h + "px");
}
function modifyPassowrd(){
	layui.element.tabAdd('demo', {
        title: '修改密码',
        content: '<iframe data-frameid="modifyPass" scrolling="auto" frameborder="0" src="/page/modifyPassword.html" style="width:100%;height:99%;"></iframe>',
        id: 'modifyPass' // 规定好的id
    })
    FrameWH();
    layui.element.tabChange('demo', 'modifyPass');
}

function initLeftMenu( ){
	var menuItem = "";
	for(i in menu){
		if(menu[i].id == id){
			var oneMenu = menu[i].children;
			for(k in oneMenu){
				var twoMenu = oneMenu[k].children;
				if(twoMenu.length>0){
					menuItem += "<li class='layui-nav-item'>";
					menuItem += "<a class='' href='javascript:;' style='text-decoration: none'>"+oneMenu[k].label+"</a>";
					menuItem += "<dl class='layui-nav-child'>";
					for(m in twoMenu){
						menuItem += "<dd><a id='"+twoMenu[m].id+"' href='javascript:;' data-url='"+twoMenu[m].url+"' class='site-demo-active' style='text-decoration: none'>"+twoMenu[m].label+"</a></dd>";
					}
					menuItem += "</dl></li>";
				}
				else{
					menuItem += "<li class='layui-nav-item'><a id='"+oneMenu[k].id+"' data-url='"+oneMenu[k].url+"' class='site-demo-active' >"+oneMenu[k].label+"</a></li>";
				}
			}
		}
	}
	$("#nav").empty().append(menuItem);
	renderTab();
}
